<style src="./add-invester-portfolio.css" scoped></style>

<template>
<div class="model-wrap">
	<button class="btn btn-sm btn-primary" @click="showSelectBetaIdModal = true">增加投顾组合</button>
	<modal :title="'选择投顾组合'" ok-text="提交" cancel-text="取消" effect="fade" :small="true" :width="460" :show.sync="showSelectBetaIdModal">
		<div slot="modal-body" class="modal-body">
      <div class="input-group search-group">
        <input type="text" class="form-control" placeholder="输入组合名称" v-model="betaName"
        @keyup.enter="getOriginList">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button" @click="getOriginList">搜索</button>
        </span>
      </div>
			<table class="table table-bordered table-hover" v-show="betaList.length > 0">
				<caption>投顾组合列表</caption>
				<thead>
					<tr>
						<th class="col-xs-2">id</th>
						<th class="col-xs-2">name</th>
						<th class="col-xs-2"></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in betaList" track-by="$index">
						<td class="col-sm-2">{{item.id}}</td>
						<td class="col-sm-2">{{item.name}}</td>
						<td class="col-sm-2">
							<button class="btn btn-sm" :class="{'btn-primary': item.isSelected, 'btn-danger': !item.isSelected}" @click="selectBetaId(item)">{{item.isSelected ? '已选中' : '未选择'}}</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div slot="modal-footer" class="modal-footer">
			<button type="button" class="btn btn-default" @click="goCancel">取消</button>
			<button type="button" class="btn btn-primary" @click="goAddInvester">下一步</button>
		</div>
	</modal>

	<modal :title="'增加投顾组合'" ok-text="提交" cancel-text="取消" effect="fade" :small="true" :width="460" :show.sync="showAddInvesterModal" :callback="addInvesterInfo">
		<div slot="modal-body" class="modal-body">
			<form class="form-horizontal" role="form" v-el:add-form>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            组合ID</label>
					<div class="col-sm-9 text-left">
						<input type="text" class="form-control" disabled v-model="addGroup.id">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            组合名称</label>
					<div class="col-sm-9 text-left">
						<input type="text" class="form-control" v-model="addGroup.name">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            组合描述</label>
					<div class="col-sm-9 text-left">
						<input type="text" class="form-control" v-model="addGroup.descr">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">标签（用空格分开）</label>
					<div class="col-sm-9 text-left">
						<input type="text" class="form-control" v-model="addGroup.labels">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            组合类型</label>
					<div class="col-sm-9 text-left">
						<input type="text" class="form-control" v-model="addGroup.betaType">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            产品介绍</label>
					<div class="col-sm-9 text-left">
            <textarea class="form-control" rows="3" v-model="addGroup.proDesc"></textarea>
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">适合人群</label>
					<div class="col-sm-9 text-left">
            <textarea class="form-control" rows="3" v-model="addGroup.proSpec"></textarea>
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">风险等级</label>
					<div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="addGroup.riskLevel"
              v-if="payType === 2">
						<select class="form-control" v-model="addGroup.riskLevel"
              v-if="payType === 1">
              <option value="保守型">保守型</option>
              <option value="稳健型">稳健型</option>
              <option value="积极型">积极型</option>
            </select>
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            组合封面</label>
					<div class="col-sm-9 text-left">
						<input type="file" class="form-control" v-model="addGroup.file" accept="image/jpeg,image/png" v-el:group-image>
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-3 control-label">
            <span class="label-red">*</span>
            投顾人员ID</label>
					<div class="col-sm-9 text-left">
						<select class="form-control" v-model="addGroup.investerId">
                  <option
                    v-for="item in investerList">
                    {{item.id}}
                  </option>
                </select>
					</div>
				</div>
				<template v-if="currentInvester">
          <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label">
              <span class="label-red">*</span>
              投顾人员姓名</label>
            <div class="col-sm-9 text-left">
              <input type="text" class="form-control" disabled v-model="currentInvester.name">
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label">投顾人员机构</label>
            <div class="col-sm-9 text-left">
              <input type="text" class="form-control" disabled v-model="currentInvester.org">
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label">
              <span class="label-red">*</span>
              投顾人员执业编号</label>
            <div class="col-sm-9 text-left">
              <input type="text" class="form-control" disabled v-model="currentInvester.cardNum">
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label">
              <span class="label-red">*</span>
              投顾人员头像</label>
            <div class="col-sm-9 text-left">
              <img class="invester-image" :src="serverRoot + currentInvester.img"/>
            </div>
          </div>
        </template>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">NEW标识</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.isNew">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">展示在首页</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.isHomepage">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">允许一键买入</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.isBuyAllow">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">允许一键调仓</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.isTransferAllow">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">上架</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.status">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
            <div class="form-group form-group-sm">
              <label class="col-sm-3 control-label">展示合作方</label>
              <div class="col-sm-9 text-left">
                <select class="form-control" v-model="addGroup.isCoorp">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
          </form>
        </div>
        <div slot="modal-footer" class="modal-footer">
         <button type="button" class="btn btn-default" @click="goSelectBetaId">上一步</button>
         <button type="button" class="btn btn-primary" @click="addInvesterInfo">提交</button>
        </div>
      </modal>
  </div>
</template>

<script src="./add-invester-portfolio.js"></script>
